<template>
  <div class="system-user-container layout-padding">
    <el-page-header @back="router.back()">
      <template #content> {{ route.query.name }} </template>
    </el-page-header>
    <el-card shadow="hover" class="layout-padding-auto" style="margin-top: 16px">
      <div class="system-user-search mb15">
        <el-form ref="searchFormRef" :model="searchForm" inline>
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="searchForm.name" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" @click="refresh">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
            <el-button size="default" @click="onRest">
              <el-icon>
                <ele-RefreshRight />
              </el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <div class="table-tool-bar">
          <el-button size="default" type="primary" v-if="$can(ButtonPermission.CREATE_ACTIVITY)" @click="handleAdd()">
            <el-icon>
              <ele-Plus />
            </el-icon>
            新增项目
          </el-button>
        </div>
      </div>
      <el-table :data="tableData.list" v-loading="loading" row-key="id" border style="width: 100%">
        <el-table-column prop="sku" label="SKU" width="180" fixed="left"></el-table-column>
        <el-table-column prop="name" label="项目名称" width="300" fixed="left"></el-table-column>
        <el-table-column prop="summary" label="项目描述" width="300"></el-table-column>
        <el-table-column prop="price" label="价格（元）" width="100" show-overflow-tooltip>
          <template #default="{ row }">
            {{ formatAmount(row.price) }}
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="80"></el-table-column>
        <el-table-column prop="total" label="总数量" width="80">
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="160" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ formatDate(scope.row.created_at, 'time') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button
              v-if="$can(ButtonPermission.UPDATE_ACTIVITY)"
              size="small"
              text
              type="primary"
              @click="handleEdit(scope.row)"
            >
              编辑项目
            </el-button>
            <el-button
              v-if="$can(ButtonPermission.UPDATE_ACTIVITY)"
              size="small"
              text
              type="primary"
              @click="handleDelete(scope.row)"
            >
              删除项目
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <CommonPagination :pagination="pagination" :total="tableData.total"></CommonPagination>
    </el-card>
    <AddItem ref="AddItemRef" @refresh="refresh" />
  </div>
</template>

<script setup lang="ts" name="activityList">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import { readAllActivityItem, deleteActivityItem } from '/@/api/activity-item';
import { useTable } from '/@/hooks/use-table';
import CommonPagination from '/@/components/common-pagination/index.vue';
import { useRouter } from 'vue-router';
import { formatAmount, formatDate } from '/@/utils/fomatter';
import { Activity } from '/@/models/activity';
import { ButtonPermission, DialogType } from '/@/constants';
import { useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const AddItem = defineAsyncComponent(() => import('./components/add-item.vue'));
const AddItemRef = ref();

const searchFormRef = ref<FormInstance>();
const searchForm = reactive({
  name: ''
});

const { tableData, loading, pagination, refresh } = useTable<Activity>(({ page, pageSize }) =>
  readAllActivityItem({ page, pageSize, activity_id: route.query.activity_id, ...searchForm }).then(({ data }) => {
    return {
      total: data?.total,
      list: data?.list
    };
  })
);

const onRest = () => {
  searchFormRef.value?.resetFields();
  refresh();
};

const handleAdd = () => {
  AddItemRef.value?.openDialog(DialogType.CREATE);
};

const handleEdit = (row: any) => {
  AddItemRef.value?.openDialog(DialogType.EDIT, row);
};

const handleDelete = (row: any) => {
  ElMessageBox.confirm(`此操作不可恢复，是否继续?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    buttonSize: 'default',
    beforeClose: async (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = '提交中';
        deleteActivityItem(row.id).then(() => {
          ElMessage.success('删除成功');
          refresh();
          instance.confirmButtonLoading = false;
        });
        done();
      } else {
        done();
      }
    }
  });
};
</script>

<style scoped lang="scss">
.system-user-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    .el-table {
      flex: 1;
    }
  }
}
</style>
